<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>员工信息</title>
<%@ include file="/WEB-INF/jsp/public/commons.jspf"%>
<script type="text/javascript">
	$(function() {

		var yz1;
		var yz2;
		var yz3;
		var yz4;

		//ajax

		function ajx(input) {

			$.ajax({
						type : "get",
						url : "${pageContext.request.contextPath}/user_ajx.do?username="
								+ input.value,
						dataType : "json",

						success : function(data) {
							if (data.success) {
								$("#msg1").html(data.msg);
								yz1 = false;
							} else {
								$("#msg1").html("");
								yz1 = true;
							}
						}
					});

		}

		$("#yz1").blur(function() {
			// 验证是否为空
			if ($("#yz1").val().trim() == "") {
				$("#msg1").html("不能为空");
				yz1 = false;
			}else if(/^[0-9a-zA-Z_]{5,10}$/.test($("#yz1").val())){
			ajx(this);
			} else {
				$("#msg1").html("5-10位字母,数字,下划线,组合");
			}
		});

		$("#yz2").blur(function() {
			if ($("#yz2").val().trim() == "") {
				$("#msg2").html("不能为空");
				yz2 = false;
			} else {
				$("#msg2").html("");
				yz2 = true;
			}
		});

		$("#yz3").blur(function() {
			// 验证电话
			var reg = /^(\+\d{2,3}\-)?\d{11}$/;
			if (!reg.test($("#yz3").val())) {
				$("#msg3").html("请输入正确的电话号码!");
				yz3 = false;
			} else {
				$("#msg3").html("");
				yz3 = true;
			}
		});

		$("#yz4").blur(function() {
			// 验证邮箱
			reg = /^\w{3,}@\w+(\.\w+)+$/;
			if (!reg.test($("#yz4").val())) {
				$("#msg4").html("请输入正确的Email!");
				yz4 = false;
			} else {
				$("#msg4").html("");
				yz4 = true;
			}
		});

		$("#save").bind("click", function() {
			if (yz1 && yz2 && yz3 && yz4) {
				return true;
			} else {
			// 验证是否为空
			if ($("#yz1").val().trim() == "") {
				$("#msg1").html("不能为空");
			}
			
			if ($("#yz2").val().trim() == "") {
				$("#msg2").html("不能为空");
			}
			
			// 验证电话
			var reg = /^(\+\d{2,3}\-)?\d{11}$/;
			if (!reg.test($("#yz3").val())) {
				$("#msg3").html("请输入正确的电话号码!");
			} 
			
			// 验证邮箱
			reg = /^\w{3,}@\w+(\.\w+)+$/;
			if (!reg.test($("#yz4").val())) {
				$("#msg4").html("请输入正确的Email!");
			} 
				return false;
			}
		});
	});
</script>
</head>
<body>

	<!-- 标题显示 -->
	<div id="Title_bar">
		<div id="Title_bar_Head">
			<div id="Title_Head"></div>
			<div id="Title">
				<!--页面标题-->
				<img border="0" width="13" height="13"
					src="${pageContext.request.contextPath}/style/images/title_arrow.gif" />
				员工信息
			</div>
			<div id="Title_End"></div>
		</div>
	</div>

	<!--显示表单内容-->
	<div id=MainArea>

		<s:form action="user_addUser">
			<div class="ItemBlock_Title1">
				<!-- 信息说明 -->
				<div class="ItemBlock_Title1">
					<img border="0" width="4" height="7"
						src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" />
					员工信息
				</div>
			</div>

			<!-- 表单内容显示 -->
			<div class="ItemBlockBorder">
				<div class="ItemBlock">
					<table cellpadding="0" cellspacing="0" class="mainForm">
						<font color="red"><s:fielderror />
						</font>
						<tr>
							<td>用户名</td>
							<td><s:textfield id="yz1" name="username"
									cssClass="InputStyle" /> *<label id="msg1"></label></td>
						</tr>
						<tr>
							<td>姓名</td>
							<td><s:textfield id="yz2" name="name" cssClass="InputStyle" />
								*<label id="msg2"></label></td>
						</tr>
						<tr>
							<td>性别</td>
							<td>
								<%-- <s:radio name="sex" list="%{ #{'男':'男', '女':'女'} }"></s:radio> --%>
								<s:radio name="sex" list="#{'男':'男', '女':'女'}"></s:radio> <!-- <s:radio name="sex" list="{'男', '女'}"></s:radio> -->

							</td>
						</tr>
						<tr>
							<td>手机号</td>
							<td><s:textfield id="yz3" name="phoneNumber"
									cssClass="InputStyle" /> <label id="msg3"></label></td>
						</tr>
						<tr>
							<td>E-mail</td>
							<td><s:textfield id="yz4" name="email" cssClass="InputStyle" />
								<label id="msg4"></label></td>
						</tr>

					</table>
				</div>
			</div>


			<!-- 表单操作 -->
			<div id="InputDetailBar">
				<input type="image" id="save"
					src="${pageContext.request.contextPath}/style/images/save.png" />
				<a href="javascript:history.go(-1);"><img
					src="${pageContext.request.contextPath}/style/images/goBack.png" />
				</a>
			</div>
		</s:form>
	</div>


</body>
</html>
